;
(function () {
    function Scale() { //新建构造函数,构造函数里面放置的私有的属性。
        this.wrap = $('#prod-container-left');
        this.spic = $('#j_SpecImgs');
        this.sf = $('#sf');
        this.bpic = $('#bpic');
        this.bf = $('#bf');
        this.ul = $('#smallImgUl ul');
        this.lis = $('#smallImgUl ul li');
        this.left = $('.figure-btn-l');
        this.right = $('.figure-btn-r');
    }

    //共有的方法放到原型下面prototype

    Scale.prototype.init = function () {
        // 后来加的
        this.num = 4;
        this.right.on('click', function () {
            _this.right1();
        });

        this.left.on('click', function () {
            _this.left1();
        });
        var _this = this;
        this.spic.on('mouseover', function () {
            //    alert(1)
            _this.over();
            $(document).on('mousemove', function (ev) {
                var ev = ev || window.event;
                _this.move(ev);
            })
        })
        this.spic.on('mouseout', function () {
            _this.out();
        });




        $.each(this.lis, function (index, element) {
            $(element).on('click', function () {
                var imgurl = $(this).find('img').attr("src");
                console.log(imgurl)
                _this.spic.find('img').attr("src", imgurl);
                _this.bpic.attr("src", imgurl);

            })
        })

    };


    Scale.prototype.out = function () {
        this.sf.css('visibility', 'hidden');
        this.bf.css('visibility', 'hidden');
    };


    Scale.prototype.over = function () {
        this.sf.css('visibility', 'visible');
        this.bf.css('visibility', 'visible');
        //利用公式计算sf的width/height
        this.sf.css('width', this.spic.width() * this.bf.width() / this.bpic.width());
        this.sf.css('height', this.spic.height() * this.bf.height() / this.bpic.height());
        this.bili = this.bpic.width() / this.spic.width();
    };




    Scale.prototype.move = function (ev) {

        // console.log(this.wrap.offset().left);
        var l = ev.pageX - this.wrap.offset().left - this.sf.width() / 2;
        var t = ev.pageY - this.wrap.offset().top - this.sf.height() / 2;

        if (l < 0) {
            l = 0;
        } else if (l >= this.spic.width() - this.sf.width()) {
            l = this.spic.width() - this.sf.width() - 2;
        }

        if (t < 0) {
            t = 0;
        } else if (t >= this.spic.height() - this.sf.height()) {
            t = this.spic.height() - this.sf.height() - 2;
        }

        this.sf.css('left', l);
        this.sf.css('top', t);

        this.bpic.css('left', -this.bili * l);
        this.bpic.css('top', -this.bili * t);
    };
    Scale.prototype.left1 = function () {
        if (this.num > 4) {
    
            this.num--;
            this.right.css({
                "color": "#333"
            });
            if (this.num == this.lis.length) {
    
                this.left.css({
                    "color": "#fff"
                })
            }
    
    
            this.ul.animate({
                left: -86 * (this.num - 4)
    
            })
        }
    
    };
    
    Scale.prototype.right1 = function () {
        if (this.lis.length > this.num) {
    
            this.num++;
            this.left.css({
                "color": "#fff"
            });
            if (this.num == this.lis.length) {
    
                this.right.css({
                    "color": "#333"
                })
            }
    
    
            this.ul.animate({
                left: -86 * (this.num - 4)
    
            })
        }
    
    };


    new Scale().init();

})();






